<template>
	<div id="item" :style="`height:${height}; backgroundColor:${bacolor};`" :class="border ? 'border':''">
		<router-link :to="to" :style="`padding:${padding}; color:${color}; fontSize:${size}`">
			<div class="left">
				<img v-show="image" :src="image" alt="">
				<span>{{text}}</span>
			</div>


			<div class="right">
				<span>{{title}}</span>
				<span class="iconfont" :class="classleft"></span>
			</div>
		</router-link>
	</div>
</template>

<script>
	export default {
		props: {
			image: {
				type: String,
				default: ''
			},
			text: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			to: {
				type: String,
				default: ''
			},
			height: {
				type: String,
				default: '50px'
			},
			padding: {
				type: String,
				default: '20px'
			},
			border: {
				type: Boolean,
				default: 'true'
			},
			bacolor: {
				type: String,
				default: '#fff'
			},
			color: {
				type: String,
				default: '#000'
			},
			size: {
				type: String,
				default: '16px'
			},
			classleft: {
				type: String,
				default: 'icon-xiangyoujiantou'
			}
		}
	}
</script>

<!-- 公共样式 -->
<style lang='scss' scoped>
	// scss 变量
	$width: (100vw / 375);

	#item {
		width: 100vw;
		background-color: #fff;

		a {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #636b7d;

			.left {
				display: flex;
				align-items: center;

				img {
					width: 25 * $width;
					margin-right: 10 * $width;
				}
			}

			.right {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.iconfont {
					margin-left: 10 * $width;
					font-size: 15 * $width;
				}
			}
		}
	}

	.border {
		border-bottom: 1 * $width solid #eee;
	}
</style>
